import React, { useState, useEffect, useMemo } from 'react';
import ReactECharts from 'echarts-for-react';
import { useRequest } from 'umi';
import { getFetch } from '@/utils/doFetch';
import moment from 'moment';

const Charts = () => {
  const { data, loading } = useRequest(
    () => {
      return getFetch({ url: '/vehicle-api/monitor/month_monitor', params: {} });
    },
    {
      debounceWait: 300,
      pollingInterval: 60000,
    },
  );

  const options = useMemo(() => {
    let xdata = data
        ? data.map((it) => {
            return moment(it.alarm_time).format('MM-DD');
          })
        : [],
      ydata = data
        ? data.map((it) => {
            return it.num;
          })
        : [];

    return {
      grid: {
        left: '0px',
        right: '12px',
        bottom: '20px',
        top: '10px',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: xdata,
        splitLine: { show: false },
      },
      yAxis: {
        type: 'value',
        splitLine: { show: false },
        show: false,
      },
      series: [
        {
          data: ydata,
          type: 'line',
          smooth: true,
          label: {
            show: true,
            position: 'under',
          },
        },
      ],
      tooltip:{}
    };
  }, [data]);

  return <ReactECharts style={{ height: '100%', width: '100%' }} option={options} />;
};

export default Charts;
